<template>
  <div id="comments">

    <el-form>
      <br>
      <el-form-item label="用户账号">
        <el-input v-model="searchObj.userAccount" placeholder="账号"></el-input>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label=""
          width="50"
          prop="id">
        <template slot-scope="scope">
          <router-link :to="{path:'/selectCommentsById',query:{index:scope.row.id}}">
            <i class="el-icon-view"></i>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
          label="id"
          width="150"
          prop="id">
        <template slot-scope="scope">
          <router-link :to="{path:'/selectCommentsById',query:{index:scope.row.id}}">
                        {{scope.row.id}}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
          label="用户名称"
          width="180"
          prop="userName">
      </el-table-column>
      <el-table-column
          label="用户账号"
          width="180"
          prop="userAccount">
      </el-table-column>
      <el-table-column
          label="用户头像"
          width="180"
          prop="userImage">
        <template slot-scope="scope">
          <img :src="scope.row.headUrl" v-if="scope.row.headUrl!=null" width="20%">
          <img src="http://localhost:10002/c9374734-9353-49ee-a3a1-c333171549de.jpg" v-else-if="scope.row.userImage==null" width="20%">
        </template>
      </el-table-column>
      <el-table-column
          prop="userPhone"
          label="手机号码"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userProvince"
          label="省"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userCity"
          label="市"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userAddr"
          label="区"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userMechant"
          label="是否是商户"
          width="200">
        <template slot-scope="scope">
          {{scope.row.userMechant== "1" ? "不是":"是"}}
        </template>
      </el-table-column>
      <el-table-column
          prop="userSupplier"
          label="是否是供应商"
          width="200">
        <template slot-scope="scope">
          {{scope.row.userSupplier == "1" ? "不是":"是"}}
        </template>
      </el-table-column>

      <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>


    </el-table>

    <!-- //分页功能 -->
    <div class="block">

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="pageSizeList"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getComments()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getComments()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getComments()
    },
    search(){
      this.pageNo=1,
          this.getComments()
    },
    async getComments(){
      const {data : res} = await this.$http.post(`/customer/list/${this.pageNo}/${this.pageSize}`,this.searchObj)
      this.tableData = res.rows
      this.total = res.total
    },
  },

  data() {
    return {
      tableData: [
      ],
      pageNo:1,
      pageSizeList:[2,5,10,20],
      total:0,
      pageSize:2,
      searchObj: {
      }
    }
  }
}
</script>

<style >

</style>